vue组件中data为啥是函数return一个对象,而不直接是一个data | 您所在的位置:网站首页 › vue data 为什么是函数 › vue组件中data为啥是函数return一个对象,而不直接是一个data |
官网的示例 var vm = new Vue({ el: '#example', data: { message: 'Hello' } });项目中的写法 data() { return { message: 'Hello' } }为什么要把data变成函数并return属性呢? 组件是一个可复用的实例,当你引用一个组件的时候,组件里的data是一个普通的对象,所有用到这个组件的都引用的同一个data,就会造成数据污染。 将data封装成函数后,在实例化组件的时候,我们只是调用了data函数生成的数据副本,避免了数据污染。 PS:下面看下vue中data是否使用return的区别 // Vue实例中data属性是如下方式展示的: let app = newVue({ el: "#app", data: { msg: '' }, methods: {} }) // 使用组件化的项目中是如下方式展示的: export default{ data(){ return{ showLogin:true, msg:'' } }, methods:{} }// 为何在大型项目中data需要使用return返回数据呢? // 答:不使用return包裹的数据会在项目的全局可见,会造成变量污染 // 使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件 总结 以上所述是小编给大家介绍的vue里的data要用return返回的原因浅析 |
CopyRight 2018-2019 实验室设备网 版权所有 |